<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>学生修改</title>
		<link rel="stylesheet" type="text/css" href="../css/demo.css" />
	</head>
	<body>
		<div id="app">
			<fieldset>
				<legend>修改</legend>
				<div class="form-group">
					<label>学号:</label>
					<input type="text" :value="param.stuCode" readonly="readonly" style="background-color: #BCBCBC;"/>
				</div>
				<div class="form-group">
					<label>姓名*:</label>
					<input type="text" v-model="param.stuName" @focus="clear(2)" @blur="check(2)" />
					<span class="msg" v-if="msgFlg.stuName">请输入姓名</span>
				</div>
				<div class="form-group">
					<label>学校*:</label>
					<select v-model="param.sclId" @focus="clear(3)" @blur="check(3)">
						<option value="">---</option>
						<option v-for="item in scllist" :value="item.id">{{item.schoolname}}</option>
					</select>
					<span class="msg" v-if="msgFlg.sclId">请选择学校</span>
				</div>
				<div class="form-group">
					<label>年龄*:</label>
					<input type="text" v-model="param.stuAge" @focus="clear(4)" @blur="check(4)" />
					<span class="msg" v-if="msgFlg.stuAge">请输入数字</span>
				</div>
				<div class="form-group">
					<label>生日</label>
					<input type="text" v-model="param.birthday" @focus="clear(5)" @blur="check(5)" />
					<span class="msg" v-if="msgFlg.birthday">请输入时间(yyyy-MM-dd)</span>
				</div>
				<div class="form-group">
					<label>性别*:</label>
					<select v-model="param.sexId" @focus="clear(6)" @blur="check(6)">
						<option value="">---</option>
						<option v-for="item in sexlist" :value="item.id">{{item.name}}</option>
					</select>
					<span class="msg" v-if="msgFlg.sexId">请选择性别</span>
				</div>
				<div class="form-group">
					<label></label>
					<button @click="save()" :disabled="saveFlg">保存</button>
					<button onclick="location.replace('studentselect.html');" >返回</button>
					<span :class="showmsg.classobject">{{showmsg.msginfo}}</span>
				</div>
			</fieldset>
		</div>
		<script type="text/javascript" src="../js/urlparse.js" ></script>
		<script type="text/javascript" src="../js/vue.js" ></script>
		<script type="text/javascript" src="../js/axios.js" ></script>
		<script type="text/javascript" src="../js/message.js" ></script>
		<script>
			var vue = new Vue({
				el : "#app",
				data : {
					"param" : {
						"stuId" : "",
						"stuCode":"",
						"stuName" : "",
						"sclId" : "",
						"stuAge" : "",
						"birthday" : "",
						"sexId" : ""
					},
					"scllist" : [
					],
					"sexlist" : [
					],
					"msgFlg" : {
						"stuName" : false,
						"sclId" : false,
						"stuAge" : false,
						"birthday" : false,
						"sexId" : false
					},
					showmsg: {
						msginfo: "",
						classobject: {
							msg: false,
							success: false
						}
					},
					"saveFlg" : false
				},
				methods : {
					save : function() {
						for(var i=2;i<=6;i++) {
							this.check(i);
						}
						
						if(this.msgFlg.stuName == false  && 
						   this.msgFlg.sclId == false && this.msgFlg.stuAge == false  &&
						   this.msgFlg.birthday == false && this.msgFlg.sexId == false ) {
						   		axios.post("http://localhost:8000/bracelet/api/bstudent/update", {
										"id": this.param.stuId,
										"stucode" : this.param.stuCode,
						   				"stuname": this.param.stuName,
						   				"stuschid": this.param.sclId,
						   				"stuage": this.param.stuAge,
						   				"stubrithday": this.param.birthday,
						   				"codenameid": this.param.sexId
						   			})
						   			.then(res => {
						   				if(res.data.result) {
						   					// 更新成功
						   					this.showmsg.classobject.success = true;
						   					this.showmsg.classobject.msg = false;
						   					this.showmsg.msginfo = message.A008;
						   					this.saveFlg = true;
						   					
						   					setTimeout("location.replace('studentselect.html')", 3000);
						   				} else {
						   					this.showmsg.classobject.success = false;
						   					this.showmsg.classobject.msg = true ;
						   					this.showmsg.msginfo = message.A009;
						   					this.saveFlg = false;
						   				}
						   			})
						   			.catch(error => {
						   				location.href = "../500.html";
						   			});
						   }
					},
					check : function(type) {
						if(type==2) {
							var reg = /^.{1,10}$/;
							if(!reg.test(this.param.stuName)) {
								this.msgFlg.stuName = true;
								return;
							}
						} else if(type==3) {
							if(this.param.sclId == null || this.param.sclId == "") {
								this.msgFlg.sclId = true;
								return;
							}
						} else if(type==4) {
							var reg = /^\d{1,2}$/;
							if(!reg.test(this.param.stuAge)) {
								this.msgFlg.stuAge = true;
								return;
							}
						} else if(type==5) {
							var reg = /^\d{4}-\d{2}-\d{2}$/;
							if(this.param.birthday != null && this.param.birthday != "" && !reg.test(this.param.birthday)) {
								this.msgFlg.birthday = true;
								return;
							}
						} else if(type==6) {
							if(this.param.sexId == null || this.param.sexId == "") {
								this.msgFlg.sexId = true;
								return;
							}
						}
					},
					clear : function(type) {
						if(type==2) {
							this.msgFlg.stuName = false;
						} else if(type==3) {
							this.msgFlg.sclId = false;
						} else if(type==4) {
							this.msgFlg.stuAge = false;
						} else if(type==5) {
							this.msgFlg.birthday = false;
						} else if(type==6) {
							this.msgFlg.sexId = false;
						} 
					}
				},
				created : function() {
					var stuid = getQueryString("id");
					if(!stuid) {
						location.href = "../500.html";
					}
					
					axios.post("http://localhost:8000/bracelet/api/bcodename/getcodelist", {
							"codeId": "001"
						})
						.then(res => {
							this.sexlist = res.data.result;
						})
						.catch(error => {
							location.href = "../500.html";
						});
					
					axios.post("http://localhost:8000/bracelet/api/bschool/getallscllist")
						.then(res => {
							this.scllist = res.data.result;
						})
						.catch(error => {
							location.href = "../500.html";
						});
						
					axios.post("http://localhost:8000/bracelet/api/bstudent/findbyid",
								{"id": stuid}
					          )
						.then(res => {
							this.param.stuId = res.data.result.id;
							this.param.stuCode = res.data.result.stucode;
							this.param.stuName = res.data.result.stuname;
							this.param.sclId = res.data.result.stuschid;
							this.param.stuAge = res.data.result.stuage;
							this.param.birthday = res.data.result.stubrithday;
							this.param.sexId = res.data.result.codenameid;
						})
						.catch(error => {
							location.href = "../500.html";
						});
				}
			});
		</script>
	</body>
</html>
